/**
 * @description  barra工作台（收益分解）
 * @author swl
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin } from 'antd';
import { XYAxisChartsC, TreeChartsC, ThreeHeaderC, SecondHeaderC, PrimaryGhostC } from '../../../../../../comps';
import { exportFile } from '@/src/utils/commonFunc';

class PortfolioAnalysis extends PureComponent {
  // 默认值
  static defaultProps = {};

  constructor() {
    super();
    this.state = {
      income: [], // 收益分解数据
      excessTrendData: { xAxis: undefined, series: undefined }, // 超额趋势数据
    };
  }
  componentDidMount() {
    const { dispatch, searchData } = this.props;
    dispatch({
      type: 'incomeAnalysisM/getIncome',
      payload: searchData,
      callback: (res) => {
        this.setState({
          income: res && res.length ? res : [],
        });
      },
    });
    dispatch({
      type: 'incomeAnalysisM/getExcessTrend',
      payload: searchData,
      callback: (res) => {
        if (res) {
          let obj = { color: 'rgba(133, 142, 239, 0.5)' };
          if (res.series && res.series[2]) res.series[2].areaStyle = obj;
        }
        this.setState({
          excessTrendData: res ? res : { xAxis: undefined, series: undefined },
        });
      },
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch } = this.props;
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      dispatch({
        type: 'incomeAnalysisM/getIncome',
        payload: nextProps.searchData,
        callback: (res) => {
          this.setState({
            income: res && res.length ? res : [],
          });
        },
      });
      dispatch({
        type: 'incomeAnalysisM/getExcessTrend',
        payload: nextProps.searchData,
        callback: (res) => {
          if (res) {
            let obj = { color: 'rgba(133, 142, 239, 0.5)' };
            if (res.series && res.series[2]) res.series[2].areaStyle = obj;
          }
          this.setState({
            excessTrendData: res ? res : { xAxis: undefined, series: undefined },
          });
        },
      });
    }
  }

  showCharts = () => {
    const { income } = this.state;
    const { loading } = this.props;
    return (
      <Spin spinning={loading.effects['incomeAnalysisM/getIncome']}>
        <TreeChartsC data={income} height={264} isPercent={true} />
      </Spin>
    );
  };

  showLineCharts = () => {
    const { excessTrendData } = this.state;
    const { loading } = this.props;
    return (
      <Spin spinning={loading.effects['incomeAnalysisM/getExcessTrend']}>
        <XYAxisChartsC xAxis={excessTrendData.xAxis} series={excessTrendData.series} height={264} yAxisUnit={['单位(%)']} dataZoom={true} width='100%' />
      </Spin>
    );
  };
  export = () => {
    //导出文件
    const { searchData } = this.props;
    exportFile('gateway/maat-workstation/factorExposure/downloadFactorContributionDetail', searchData);
  };
  render() {
    return (
      <div style={{ margin: '15px 0 20px 0' }}>
        <SecondHeaderC
          title='组合收益分析'
          bottomHeight={false}
          Right={
            <PrimaryGhostC
              onClick={() => {
                this.export();
              }}
              title='导出'
            />
          }
        />
        <Row>
          <Col span={12}>
            <div style={{ marginRight: '10px' }}>
              <ThreeHeaderC title={`收益分解`} />
              {this.showCharts()}
            </div>
          </Col>
          <Col span={12}>
            <div style={{ marginLeft: '10px' }}>
              <ThreeHeaderC title='超额收益趋势图' />
              {this.showLineCharts()}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ incomeAnalysisM, loading }) => ({
  incomeAnalysisM,
  loading,
}))(PortfolioAnalysis);
